<template>
  <!-- 添加目录弹框 -->
  <el-dialog
    :title="isTagsData.title"
    :visible="showAddDialog"
    width="35%"
    @close="btnCancel"
  >
    <!-- 主体区域 -->
    <el-form
      :model="directorysForm"
      :rules="directorysFormRules"
      ref="directorysFormRef"
      label-width="80px"
    >
      <!-- 判断有无subjects路由query值,没有就显示'所属学科' -->
      <el-form-item
        v-if="!subjects.id && !subjects.name"
        label="所属学科"
        prop="value"
      >
        <el-select
          v-model="directorysForm.value"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in addFrom"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="isTagsData.label" prop="directoryName">
        <el-input
          v-model="directorysForm.directoryName"
          :placeholder="isTagsData.placeholder"
          style="width: 100%"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <span slot="footer">
      <el-button @click="btnCancel">取消</el-button>
      <el-button type="primary" @click="addDirForm">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 网络请求接口方法
import { add } from '@/api/hmmm/directorys'
import { add as tagsAdd } from '@/api/hmmm/tags'
export default {
  name: 'DirectorysAdd',
  props: {
    // 控制新增弹层
    showAddDialog: { type: Boolean, required: true },
    // 路由query参数
    subjects: { type: Object, required: true },
    // 学科简单列表数据
    addFrom: { type: Array, required: true },
    // 是否为新增标签弹层
    isTags: {
      type: Boolean,
      default: false
    }
  },
  created () {
    if (this.isTags) {
      this.isTagsData = {
        title: '新增标签',
        label: '标签名称',
        placeholder: '请输入标签名称'
      }
    }
  },
  data () {
    return {
      // 目录、标签展示绑定数据
      isTagsData: {
        title: '新增目录',
        label: '目录名称',
        placeholder: '请输入目录名称'
      },
      // 验证校验规则
      directorysFormRules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ],
        value: [
          { required: true, message: '请输入所属学科', trigger: 'change' }
        ]
      },
      // 添加目录的数据
      directorysForm: {
        directoryName: '', // 目录名称
        value: '' // 下拉框的值
      }
    }
  },
  methods: {
    // 点击确定,新增目录方法
    async addDirForm () {
      try {
        // 提交之前 先做手工校验
        await this.$refs.directorysFormRef.validate()
        // 判断是否有路由query参数
        if (this.subjects.id && this.subjects.name) {
          // 路由router中query有参数
          if (this.isTags) {
            await tagsAdd({
              // 传参将路由id和name作为参数,提交数据
              subjectID: +this.subjects.id,
              tagName: this.directorysForm.directoryName
            })
            this.$message.success('新增标签成功')
          } else {
            await add({
              // 传参将路由id和name作为参数,提交数据
              subjectID: +this.subjects.id,
              directoryName: this.directorysForm.directoryName
            })
            this.$message.success('新增目录成功')
          }
          // this.showAddDialog = false // 新增目录成功时关闭弹层
          this.$emit('update:showAddDialog', false) // .sync修饰符,改变父组件传值
          // 调用父组件的方法
          this.$parent.getDirList() // 重新渲染数据表格
        } else {
          // 路由router中query没有参数
          if (this.isTags) {
            await tagsAdd({
              // 传参将form表单内容作为参数,提交数据
              subjectID: this.directorysForm.value,
              tagName: this.directorysForm.directoryName
            })
            this.$message.success('新增标签成功')
            this.$parent.getTags()
          } else {
            await add({
              // 传参将form表单内容作为参数,提交数据
              subjectID: this.directorysForm.value,
              directoryName: this.directorysForm.directoryName
            })
            this.$message.success('新增目录成功')
            this.$parent.getDirList()
          }

          this.$emit('update:showAddDialog', false)
        }
      } catch (e) {
        this.$message.error('新增目录失败')
        console.log(e)
      }
    },
    // 点击取消按钮
    btnCancel () {
      // 重置表单数据
      this.directorysForm = {
        value: '', // 所属学科
        directoryName: '' // 目录名称
      }
      this.$refs.directorysFormRef.resetFields() // 重置校验结果
      this.$emit('update:showAddDialog', false) // 关闭弹层
    }
  }
}
</script>
